<template>
  <div class="layout-header">
    <div class="header-left">
      <!-- 折叠按钮 -->
      <div class="trigger" @click="toggleCollapsed">
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else />
      </div>

      <!-- 面包屑 -->
      <ABreadcrumb v-if="appStore.showBreadcrumb" class="breadcrumb">
        <ABreadcrumbItem v-for="item in breadcrumbs" :key="item.path">
          <router-link v-if="item.path" :to="item.path">
            {{ item.title }}
          </router-link>
          <span v-else>{{ item.title }}</span>
        </ABreadcrumbItem>
      </ABreadcrumb>
    </div>

    <div class="header-right">
      <!-- 全屏按钮 -->
      <div class="header-item" @click="toggleFullscreen">
        <FullscreenExitOutlined v-if="isFullscreen" />
        <FullscreenOutlined v-else />
      </div>

      <!-- 主题切换按钮 -->
      <div class="header-item" @click="toggleTheme">
        <BulbOutlined v-if="appStore.theme === 'light'" />
        <BulbFilled v-else />
      </div>

      <!-- 用户信息 -->
      <ADropdown placement="bottomRight">
        <div class="user-dropdown">
          <AAvatar :size="32" :src="userStore.avatar">
            <template #icon>
              <UserOutlined />
            </template>
          </AAvatar>
          <span class="username">{{ userStore.nickname }}</span>
          <DownOutlined class="icon" />
        </div>
        <template #overlay>
          <AMenu>
            <AMenuItem key="profile">
              <UserOutlined />
              <span>个人中心</span>
            </AMenuItem>
            <AMenuItem key="settings">
              <SettingOutlined />
              <span>个人设置</span>
            </AMenuItem>
            <AMenuDivider />
            <AMenuItem key="logout" @click="handleLogout">
              <LogoutOutlined />
              <span>退出登录</span>
            </AMenuItem>
          </AMenu>
        </template>
      </ADropdown>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Modal } from 'ant-design-vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  DownOutlined,
  BulbOutlined,
  BulbFilled
} from '@ant-design/icons-vue'
import { useAppStore, useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const userStore = useUserStore()
const { collapsed } = storeToRefs(appStore)

const isFullscreen = ref(false)

// 切换侧边栏折叠状态
const toggleCollapsed = () => {
  appStore.toggleCollapsed()
}

// 面包屑
const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  return matched.map(item => ({
    path: item.path,
    title: item.meta.title
  }))
})

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

// 切换主题
const toggleTheme = () => {
  appStore.toggleTheme()
}

// 退出登录
const handleLogout = () => {
  Modal.confirm({
    title: '提示',
    content: '确定要退出登录吗？',
    onOk: async () => {
      await userStore.logout()
      router.push('/login')
    }
  })
}
</script>

<style lang="scss" scoped>
.layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  color: var(--text-color);

  .header-left {
    display: flex;
    align-items: center;

    .trigger {
      font-size: 20px;
      padding: 0 12px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #1890ff;
        background: var(--hover-bg);
      }
    }

    .breadcrumb {
      margin-left: 16px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .header-item {
      font-size: 18px;
      // 固定为正方形点击/悬浮区域，避免背景超出 header
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #1890ff;
        background: var(--hover-bg);
        border-radius: 6px;
      }
    }

    .user-dropdown {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: var(--hover-bg);
        border-radius: 4px;
      }

      .username {
        font-size: 14px;
        color: var(--text-color);
      }

      .icon {
        font-size: 12px;
      }
    }
  }
}

// 手机端适配
@media screen and (max-width: 768px) {
  .layout-header {
    padding: 0 12px;

    .header-left {
      .trigger {
        font-size: 18px;
        padding: 0 8px;
      }

      .breadcrumb {
        display: none; // 在手机端隐藏面包屑
      }
    }

    .header-right {
      gap: 8px;

      .header-item {
        font-size: 16px;
        width: 30px;
        height: 30px;
        padding: 0;
      }

      .user-dropdown {
        padding: 2px 4px;

        .username {
          display: none; // 在手机端隐藏用户名
        }
      }
    }
  }
}
</style>

